<template>
  <div class="building-card" :class="{ disabled: !canBuild }">
    <div class="card-header">
      <div class="building-icon">{{ building.icon || '🏢' }}</div>
      <div class="building-info">
        <h4 class="building-name">{{ building.name }}</h4>
        <div class="building-category">{{ getCategoryName(building.category) }}</div>
      </div>
      <button 
        class="info-btn"
        @click="$emit('info', building)"
        title="查看详细信息"
      >
        ℹ️
      </button>
    </div>

    <div class="card-content">
      <div class="building-description">
        {{ building.description }}
      </div>

      <!-- 建筑效果 -->
      <div class="building-effects" v-if="building.effects?.length">
        <div class="effects-title">效果:</div>
        <div class="effects-list">
          <div 
            v-for="effect in building.effects" 
            :key="effect.type"
            class="effect-item"
          >
            <span class="effect-icon">{{ getEffectIcon(effect.type) }}</span>
            <span class="effect-text">{{ formatEffect(effect) }}</span>
          </div>
        </div>
      </div>

      <!-- 建造成本 -->
      <div class="building-cost" v-if="building.cost">
        <div class="cost-title">建造成本:</div>
        <div class="cost-list">
          <div 
            v-for="(amount, resource) in building.cost" 
            :key="resource"
            class="cost-item"
            :class="{ insufficient: !hasEnoughResource(resource, amount) }"
          >
            <span class="cost-icon">{{ getResourceIcon(resource) }}</span>
            <span class="cost-amount">{{ formatNumber(amount) }}</span>
          </div>
        </div>
      </div>

      <!-- 建造时间 -->
      <div class="build-time" v-if="building.buildTime">
        <span class="time-icon">⏱️</span>
        <span class="time-text">建造时间: {{ formatTime(building.buildTime) }}</span>
      </div>

      <!-- 维护成本 -->
      <div class="maintenance" v-if="building.maintenance">
        <div class="maintenance-title">维护成本:</div>
        <div class="maintenance-list">
          <div 
            v-for="(amount, resource) in building.maintenance" 
            :key="resource"
            class="maintenance-item"
          >
            <span class="maintenance-icon">{{ getResourceIcon(resource) }}</span>
            <span class="maintenance-amount">{{ formatNumber(amount) }}/秒</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card-footer">
      <button 
        class="build-btn"
        :class="{ disabled: !canBuild }"
        :disabled="!canBuild"
        @click="$emit('build', building)"
      >
        <span class="btn-icon">🔨</span>
        <span class="btn-text">{{ canBuild ? '建造' : '资源不足' }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useResourcesStore } from '@/stores'

interface BuildingEffect {
  type: string
  value: number
}

interface Building {
  id: string
  name: string
  description: string
  category: string
  icon?: string
  cost?: Record<string, number>
  maintenance?: Record<string, number>
  buildTime?: number
  effects?: BuildingEffect[]
}

interface Props {
  building: Building
  canBuild: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
  build: [building: Building]
  info: [building: Building]
}>()

const resourcesStore = useResourcesStore()

// 计算属性
const canBuild = computed(() => props.canBuild)

// 方法
function getCategoryName(category: string): string {
  const categories: Record<string, string> = {
    infrastructure: '基础设施',
    industrial: '工业建筑',
    research: '研究设施',
    military: '军事建筑',
    commercial: '商业建筑'
  }
  return categories[category] || category
}

function getEffectIcon(type: string): string {
  const icons: Record<string, string> = {
    energy_production: '⚡',
    metal_production: '⛏️',
    crystal_production: '💎',
    research_production: '🔬',
    credits_production: '💰',
    population_capacity: '👥',
    defense: '🛡️',
    ship_production: '🚀',
    storage_capacity: '📦'
  }
  return icons[type] || '📈'
}

function getResourceIcon(resource: string): string {
  const icons: Record<string, string> = {
    energy: '⚡',
    metals: '⛏️',
    crystals: '💎',
    credits: '💰',
    research: '🔬',
    influence: '🎭'
  }
  return icons[resource] || '❓'
}

function formatEffect(effect: BuildingEffect): string {
  const typeNames: Record<string, string> = {
    energy_production: '能源产量',
    metal_production: '金属产量',
    crystal_production: '水晶产量',
    research_production: '研究产量',
    credits_production: '信用点产量',
    population_capacity: '人口容量',
    defense: '防御力',
    ship_production: '舰船生产',
    storage_capacity: '存储容量'
  }
  
  const typeName = typeNames[effect.type] || effect.type
  const value = effect.value > 0 ? `+${effect.value}` : effect.value.toString()
  
  return `${typeName} ${value}`
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatTime(seconds: number): string {
  if (seconds < 60) return `${seconds}秒`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}小时`
  return `${Math.floor(seconds / 86400)}天`
}

function hasEnoughResource(resource: string, amount: number): boolean {
  return resourcesStore.resources[resource] >= amount
}
</script>

<style scoped>
.building-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.building-card:hover {
  border-color: #00d4ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
}

.building-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.building-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.building-icon {
  font-size: 2rem;
  min-width: 40px;
}

.building-info {
  flex: 1;
}

.building-name {
  margin: 0 0 0.25rem 0;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
}

.building-category {
  color: #00d4ff;
  font-size: 0.875rem;
  font-weight: 500;
}

.info-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  padding: 0.375rem;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.info-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.card-content {
  margin-bottom: 1rem;
}

.building-description {
  color: #cccccc;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.building-effects {
  margin-bottom: 1rem;
}

.effects-title {
  color: #00d4ff;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.effect-icon {
  font-size: 1rem;
  min-width: 20px;
}

.effect-text {
  color: #ffffff;
}

.building-cost {
  margin-bottom: 1rem;
}

.cost-title {
  color: #f59e0b;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cost-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cost-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  font-size: 0.875rem;
  color: #f59e0b;
}

.cost-item.insufficient {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.3);
  color: #ff4444;
}

.cost-icon {
  font-size: 1rem;
}

.cost-amount {
  font-weight: 500;
}

.build-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #888888;
}

.time-icon {
  font-size: 1rem;
}

.maintenance {
  margin-bottom: 1rem;
}

.maintenance-title {
  color: #ff6b6b;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.maintenance-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.maintenance-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 4px;
  font-size: 0.875rem;
  color: #ff6b6b;
}

.maintenance-icon {
  font-size: 1rem;
}

.maintenance-amount {
  font-weight: 500;
}

.card-footer {
  display: flex;
  justify-content: center;
}

.build-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #000000;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.build-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #0099cc, #007399);
  transform: translateY(-1px);
}

.build-btn.disabled {
  background: rgba(128, 128, 128, 0.3);
  color: #888888;
  cursor: not-allowed;
}

.btn-icon {
  font-size: 1rem;
}

.btn-text {
  font-size: 0.875rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .building-card {
    padding: 0.75rem;
  }
  
  .card-header {
    gap: 0.5rem;
  }
  
  .building-icon {
    font-size: 1.5rem;
    min-width: 30px;
  }
  
  .building-name {
    font-size: 1rem;
  }
  
  .cost-list,
  .maintenance-list {
    flex-direction: column;
  }
  
  .build-btn {
    padding: 0.625rem 1rem;
  }
}
</style>